<template>
  <div class="user">
    <div class="head">
      <img class="avatar" src="//s.yezgea02.com/1606836859539/onpeice.png" />
      <div class="info">
        <span class="name">{{ user.username || '' }}</span>
        <span class="slogen">个性签名：{{ user.signature || '' }}</span>
      </div>
    </div>
    <div class="content">
      <van-cell
        icon="edit"
        @click="visibleSig = true"
        title="修改个性签名"
        is-link
      />
      <van-cell
        icon="setting-o"
        to="/navbar/account"
        title="账户安全"
        is-link
      />
      <van-cell
        icon="good-job-o"
        @click="visibleRate = true"
        title="软件评分"
        is-link
      />

      <van-collapse v-model="activeNames">
        <van-collapse-item icon="shop-o" title="换肤" name="2">
          <van-cell title="亮色" @click="changeColor('light')">
            <van-tag color="#39be77">#39be77</van-tag>
          </van-cell>
          <van-cell title="粉色" @click="changeColor('pink')">
            <van-tag color="#faafaa">#faafaa </van-tag>
          </van-cell>
          <van-cell title="蓝色" @click="changeColor('blue')">
            <van-tag color="#87ceeb">#87ceeb </van-tag>
          </van-cell>
        </van-collapse-item>
      </van-collapse>
    </div>
    <v-dialog
      v-model:show="visibleSig"
      @confirm="confirmSig"
      title="个性签名"
      show-cancel-button
    >
      <van-field
        v-model="signature"
        rows="2"
        autosize
        type="textarea"
        maxlength="20"
        placeholder="请输入个性签名"
        show-word-limit
      />
    </v-dialog>
    <v-dialog
      class="rate"
      v-model:show="visibleRate"
      title="软件评分"
      show-cancel-button
    >
      <van-rate
        class="rate"
        v-model="rate"
        allow-half
        void-icon="star"
        void-color="#eee"
      />
    </v-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs,ref } from 'vue'
import { get, post } from '@/utils/request'
import changeTheme from '@/theme/theme'
import { Toast,Dialog } from 'vant'
export default {
  name: 'User',
  components: {
    'v-dialog': Dialog.Component,
  },
  setup() {    
    const visibleSig = ref(false)
    const visibleRate = ref(false)
    const state = reactive({
      user: {}, // 用户信息
      signature: '',
      rate: 4.5,
      activeNames: [1]
    })

    onMounted(async () => {
      getUserInfo()
    })

    // 获取用户信息
    const getUserInfo = async () => {
      const { data } = await get('/user/get_userinfo')
      state.user = data
      state.signature = data.signature
    }

    // 个性签名弹窗确认
    const confirmSig = async () => {
      const { data } = await post('/user/edit_signature', {
        signature: state.signature
      })
      state.user = data
      state.signature = data.signature
    }
    const changeColor = (color) => {
      changeTheme(color)
      Toast('切换成功')
    }
    return {
      ...toRefs(state),
      visibleSig,
      visibleRate,
      confirmSig,
      changeColor
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  min-height: 100%;
  background-color: #f5f5f5;
  padding: 12px;
  .head {
    display: flex;
    background: var(--bg-color3);
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 3px solid #fff;
      margin-right: 10px;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .name {
        font-size: 18px;
        color: #fff;
        font-weight: 500;
      }
      .slogen {
        color: #fff;
        background: rgba(0, 0, 0, 0.1);
        padding: 1px 5px;
        border-radius: 10px;
      }
    }
  }
}
</style>

<style lang="less">
.rate {
  .v-dialog__content {
    text-align: center;
    padding: 20px 0;
  }
}
</style>
